<template>
  <div class="container">
    <div id="printContent" ref="table">
      <div class="table-outer" style="width:900px; margin:30px auto;">
        <div class="header-logo">
          <img style="display:inline-block; width:200px;" :src="logo" alt="">
        </div>
        <div class="table-name" style="width:100%;text-align:center;font-size: 32px;margin-top:10px;">检测报告</div>
        <div class="table-header flex-x" style="display:flex;padding:0 130px 0 0;justify-content: space-between;margin-top:20px;">
          <div class="table-header-item">产品ID：{{productId}}</div>
          <div class="table-header-item">产品型号：{{data_1.产品型号 }}</div>
          <div class="table-header-item">打印日期：{{data_1.打印日期 | formateDate}}</div>
        </div>
        <div class="table-main">
          <div class="table-box" style="margin-top:20px;width:100%;box-sizing: border-box;border:1px solid #000;">
            <div class="tr tr-1" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">作业名称</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:300px;flex-shrink: 0;"></div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:150px;flex-shrink: 0;">检测时间</div>
              <div class="td" style="text-align: center; width:300px;flex-shrink: 0;">{{data_1.功能测试 ? data_1.功能测试.检验日期 : '' | formateDate}}</div>
            </div>
            <div class="tr tr-1" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">生产厂家</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:300px;flex-shrink: 0;">成都若克石油技术开发有限公司</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:150px;flex-shrink: 0;">检测部门</div>
              <div class="td" style="text-align: center; width:300px;flex-shrink: 0;">{{data_2.testDepartment }}</div>
            </div>
            <div class="tr tr-1" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">规格型号</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:300px;flex-shrink: 0;">{{data_1.规格型号 }}</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:150px;flex-shrink: 0;">检测项目</div>
              <div class="td" style="text-align: center; width:300px;flex-shrink: 0;">功能、高压、检验测试</div>
            </div>
            <div class="tr tr-1" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">产品类型</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:300px;flex-shrink: 0;">{{data_1.产品类型 }}</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:150px;flex-shrink: 0;">检测依据</div>
              <div class="td" style="text-align: center; width:300px;flex-shrink: 0;">{{data_2.testAccord }}</div>
            </div>
            <div class="tr tr-2" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">项目</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;">功能测试</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;">高压测试</div>
              <div class="td" style="text-align: center;width:260px;flex-shrink: 0;">检验测试</div>
            </div>
            <div class="tr tr-2" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">电压（V）</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;">{{data_1.功能测试 != null ? data_1.功能测试.电压 : ''}}</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;"></div>
              <div class="td" style="text-align: center; width:260px;flex-shrink: 0;"></div>
            </div>
            <div class="tr tr-2" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">电流（mA）</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;">{{data_1.功能测试 != null ? data_1.功能测试.电流 : ''}}</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;"></div>
              <div class="td" style="text-align: center; width:260px;flex-shrink: 0;"></div>
            </div>
            <div class="tr tr-2" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">日期</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;">{{data_1.功能测试 ? data_1.功能测试.日期 : '' | formateDate}}</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:260px;flex-shrink: 0;"></div>
              <div class="td" style="text-align: center; width:260px;flex-shrink: 0;"></div>
            </div>
            <div class="tr tr-3" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">合格判定</div>
              <div class="td"></div>
            </div>
            <div class="tr tr-3" style="display: flex;line-height:50px;border-bottom:1px solid #000;">
              <div class="td" style="text-align: center;border-right:1px solid #000; width:100px;flex-shrink: 0;">备注</div>
              <div class="td" style="text-align: center; width:780px;flex-shrink: 0;" >{{data_2.remark }}</div>
            </div>
            <div class="tr tr-4" style="display: flex;height:270px;border-bottom:1px solid #000;">
              <div class="td" style="width:50%;height:100%;border:none;">
                <div class="chart-item" style="width:100%;height:100%;" ref="myLinechart" ></div>
              </div>
              <div class="td" style="width:50%;height:100%;border:none;">
                <div class="chart-item" style="width:100%;height:100%;" ref="myLinechart2"></div>
              </div>
            </div>
            <div class="tr tr-5" style="display: flex;line-height:50px;border:none; text-align: center; ">
              <div class="td" style="text-align: center; border-right:1px solid #000; width:110px;flex-shrink: 0;">操作员</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:120px;flex-shrink: 0;">
                <image-preview :src="data_2.operator" :width="50" :height="30" style="margin-top: 10px;"/>
              </div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:110px;flex-shrink: 0;">检验员</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:120px;flex-shrink: 0;">
                <image-preview :src="data_2.inspector" :width="50" :height="30" style="margin-top: 10px;"/>
              </div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:110px;flex-shrink: 0;">审核员</div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:120px;flex-shrink: 0;">
                <image-preview :src="data_2.auditor" :width="50" :height="30" style="margin-top: 10px;"/>
              </div>
              <div class="td" style="text-align: center;border-right:1px solid #000; width:110px;flex-shrink: 0;">批准人</div>
              <div class="td" style="text-align: center; width:120px;flex-shrink: 0;">
                <image-preview :src="data_2.approve" :width="50" :height="30" style="margin-top: 10px;"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row>
      <el-button
        size="small"
        type="primary"
        @click="printPage"
        icon="el-icon-printer"
      >打印</el-button>
    </el-row>
  </div>
</template>
<script>
import logo from '@/assets/logo/page_logo.png'
import echarts from "echarts";
import {productQualityChart} from "@/api/smart/product";
import {listQualityform} from "@/api/smart/qualityform";
import {formateDate} from "@/api/tool/formateDate";
export default {
  name:'Report',
  data(){
    return {
      logo:logo,
      myLinechart:null,
      myLinechart2:null,
      data_1:{},
      data_2:{
        operator:'',
        inspector:'',
        auditor:'',
        approve:'',
      },
      chartdata:[],
      productId:null,
    }
  },
  created() {
    this.productId = this.$route.query.id * 1;
    //产品检验数据
    this.productQC();
    this.listQF();

  },

  filters:{
    formateDate (time) {
      if(time === '' || time === null || time ===undefined) {
        return ''
      }
      console.log("time====1" + time)
      let date = new Date(time)
      return formateDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    productQC(){
      productQualityChart(this.productId).then(response => {
        this.data_1 = response.data;
        this.chartdata = this.data_1['电流电压曲线'];
        this.initCharts();
        this.initCharts2();

      });
    },
    listQF(){
      listQualityform().then(response => {
        this.data_2 = response.rows[0];
      });
    },
    initCharts(){

      var xdata = [];
      var cdata = [];
      var vdata = [];

      console.log("-------" + this.chartdata)
      this.chartdata = JSON.parse(this.chartdata);
      for (let rt = 0; rt < this.chartdata.length; rt++) {
        xdata.push(this.chartdata[rt]['time']);
        cdata.push(this.chartdata[rt]['current']);
        vdata.push(this.chartdata[rt]['voltage']);
      }
      console.log("temp ++ " + this.chartdata.length);
      this.$nextTick(() => {
        this.myLinechart = echarts.init(this.$refs.myLinechart, "macarons");
        this.myLinechart.setOption({
          xAxis: {
            type: 'category',
            data: xdata
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            data: ['电流', '电压']
          },
          series: [
            {
              name:'电流',
              data: cdata,
              type: 'line'
            },
            {
              name:'电压',
              type: 'line',
              data: vdata
            }
          ]
        });
      });
    },
    initCharts2(){
      this.$nextTick(() => {
        this.myLinechart2 = echarts.init(this.$refs.myLinechart2, "macarons");
        this.myLinechart2.setOption({
          xAxis: {
            type: 'category',
            data: null
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            data: ['电流', '电压']
          },
          series: [
            {
              name:'电流',
              data: null,
              type: 'line'
            },
            {
              name:'电压',
              type: 'line',
              data: null
            }
          ]
        });
      });
    },
    printPage() {
      this.$nextTick(()=>{
        let arr=document.getElementsByClassName('isNeedRemove')
        if(arr.length) {
          for (let i = arr.length - 1; i >= 0; i--) {
            arr[i].remove();
          }
        }
      })
      this.$print(this.$refs.table)
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width:100%;
  display:flex;
  flex-direction: column;
  align-items: center;
  .table-outer{
    width:900px;
    margin:30px auto;
  }
  .header-logo{
    img{
      display:inline-block;
      width:200px;
    }
  }
  .table-name{
    width:100%;
    text-align:center;
    font-size: 32px;
    margin-top:10px;
  }
  .table-header{
    display:flex;
    padding:0 20px;
    justify-content: space-between;
    margin-top:20px;
  }
  .table-main{
    .table-box{
      margin-top:20px;
      width:100%;
      box-sizing: border-box;
      border:1px solid #000;
      border-collapse: collapse;
      .tr{
        display: flex;
        line-height:50px;
        border-bottom:1px solid #000;
        .td{
          text-align: center;
          border-right:1px solid #000;
        }
        .td:first-child{
          width:100px;
          flex-shrink: 0;
        }
        .td:last-child{
          border:none;
        }
      }
      .tr-1{
        .td{
          width:300px;
        }
        .td:nth-child(3){
          width:150px;
        }
      }
      .tr-2{
        .td{
          width:260px;
          border-right:1px solid #000;
        }
      }
      .tr-4{
        height:270px;
        .td:first-child{
          width:50%;
          border:none;
        }
        .td{
          width:50%;
          height:100%;
          .charts-item{
            width:100%;
            height:100%;
          }
        }
      }
      .tr-5{
        border:none;
        .td{
          width:120px;
        }
      }
    }
  }
}
</style>
